<template>
	<view class="" style="height: auto;padding: 50rpx;">
		<view class="" style="margin-top: 30rpx;">
			<view class="img" style="text-align: center;width: 100%;">
				<image :src="picture || product.picture" style="width: 100%;height: 100%;" mode="widthFix"></image>
			</view>
		</view>
		
		<view style="text-align: left;margin-top: 30rpx;font-size: 40rpx;font-weight: bold;">
			<text>{{product.title}}</text>
		</view>
		
		<view style="text-align: right;margin-top: 30rpx;font-size: 40rpx;font-weight: bold;color: #7c7c7c;">
			<text>￥{{product.price}}</text>
		</view>
		
		<view class="detail-desc" style="border-top: 1px solid #c3c3c3;">
			<view class="" style="display: flex;flex-direction:column;padding: 30rpx 0;">
				<text style="font-size: 30rpx;padding-bottom: 30rpx;font-weight: 600;">商品详情</text>
				<text>{{product.desc}}</text>
			</view>
			<rf-parser :html="product.content" lazy-load></rf-parser>
		</view>
		<view class="btn-group">
			<button :disabled="addCartBtnDisabled" class="btn" :class="'bg-blue'"
				@tap="toggleSpec(1)">加入购物车</button>
			<button :disabled="addCartBtnDisabled" class="btn" :class="'bg-blue'"
					@tap="toggleSpec(2)">立即结算</button>
		</view>
	</view>
</template>
<script>
	/**
	 *@des 商品规范组件
	 *@author stav stavyan@qq.com
	 *@blog https://stavtop.club
	 *@date 2020/05/03 19:17:15
	 */
	import rfNumberBox from '@/components/rf-number-box';
	import rfParser from '@/components/rf-parser';
	export default {
		name: 'rfAttrContent',
		components: {
			rfNumberBox,
			rfParser
		},
		props: {
			sgid: {
				type: String,
				default () {
					return '0';
				}
			},
			showBuyBtn: {
				type: Boolean,
				default: false
			},
			isSelectedNum: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: 'buy_now'
			},
			product: {
				type: Object,
				default () {
					return {};
				}
			},
			minNum: {
				type: Number,
				default: 1
			},
			maxNum: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				styleObject: null,
				specList: [],
				specChildList: [],
				skuId: this.product && this.product.id,
				price: null,
				stock: null,
				cartCount: parseInt(this.product.min_buy, 10) || this.minNum || 1,
				picture: null,
				specSelected: [],
				moneySymbol: this.moneySymbol,
				skuName: null
			};
		},
		computed: {
			// 购买按钮禁用
			buyBtnDisabled() {
				return parseInt(this.product.stock, 10) === 0 || this.product.is_buy === 0;
			},
			// 添加购物车按钮禁用
			addCartBtnDisabled() {
				let arr = ['11000001', '11000002', '11000003', '11000005']
				return
				this.product.point_exchange_type === '2' ||
					this.product.point_exchange_type === '4' ||
					parseInt(this.product.stock, 10) === 0 ||
					this.product.is_virtual === '1' ||
					this.product.disabled_cart ||
					!!arr.find(item => {
						return item === this.sgid
					})

			},
			currentDiscountPrice() {
				const decimal = this.product.marketing.decimal_reservation_number;
				const discount = this.product.marketing.discount;
				const price = this.price;
				switch (parseInt(decimal, 10)) {
					case -1:
						return (price * discount / 100).toFixed(2);
					case 0:
						return (price * discount / 100).toFixed(0);
					case 1:
						return (price * discount / 100).toFixed(1);
					default:
						return (price * discount / 100).toFixed(2);
				}
			},
			currentProductPrice() {
				let price = this.price;
				if (this.type === 'discount') {
					price = this.currentSkuPrice || this.currentDiscountPrice;
				}
				if (this.type === 'group_buy') {
					price = this.currentSkuPrice || this.product.marketing.ladder.price;
				}
				if (this.product.memberDiscount && this.product.memberDiscount.length !== 0) {
					price = price * (1 - this.product.memberDiscount.discount / 100);
				}
				return parseFloat(price || '0').toFixed(2);
			}
		},
		async mounted() {
			await this.initData();
		},
		methods: {
			initData() {
				
			},
			numberChange(data) {
				this.cartCount = parseInt(data.number, 10);
			},
			// 选择规格
			selectSpec(index, pid, type) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.base_spec_id === pid) {
						this.$set(item, 'selected', false);
					}
				});
				if (parseInt(type, 10) === 3) {
					this.picture = list[index].data;
				}
				if (parseInt(type, 10) === 2) {
					this.styleObject = {
						color: list[index].data,
						border: `1px solid ${list[index].data}`
					};
				}
				this.$set(list[index], 'selected', true);
				// 存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				});
				let skuStr = [];
				this.specSelected.forEach(item => {
					skuStr.push(item.base_spec_value_id);
				});
				this.product.sku.forEach(item => {
					if (item.data === skuStr.join('-')) {
						this.picture = item.picture;
						this.stock = item.stock;
						this.price = this.product.marketing_type === 'wholesale' ? item.wholesale_price : item
							.price;
						this.skuId = item.id;
						this.skuName = item.name;
					}
					// else {
					// 	if (item.data.indexOf(skuStr.join('-')) !== -1) {
					// 		console.log('skuStr', skuStr);
					// 		console.log('item.data', item.data);
					// 		this.specChildList.forEach(item2 => {
					// 			if (item2.base_spec_value_id === '120') {
					// 				item2.disabled = true;
					// 			}
					// 		});
					// 		// console.log(this.specChildList);
					// 	}
					// }
				});
			},
			toggleSpec(type) {
				console.log('type',type)
				
				this.$emit('toggle', {
					stock: this.stock,
					skuId: this.skuId,
					cartCount: this.cartCount,
					skuName: this.skuName || this.singleSkuText,
					price: this.price,
					type: type
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	
	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}
	
	.sku-info-wrapper {
		width: 100%;
		padding-bottom: $spacing-sm;
	}

	.price-wrapper {
		height: 38upx;
		display: flex;
		align-items: center;
		margin: $spacing-sm 0;

		.image {
			width: 120upx;
			height: 38upx;
		}

		.base-color {
			margin-top: 2upx;
		}
	}

	.btn-group {
		display: flex;
		// justify-content: space-between;
		position: fixed;
		bottom: 0;
		
		.btn {
			width: 35vw;
			background: #efefef;
			color: #333;
		}
	}

	.title {
		width: 100%;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
